
import React from 'react';
import classnames from 'classnames';
import css from './index.less';
import Range from 'components/config/range';
import Group from 'components/config/group';
import Bull from 'components/config/bull';
import Whxy from 'components/config/whxy';
import Stroke from 'components/config/stroke';
import Icon from 'components/icon';
import { Collapse } from 'antd';
import { observer, inject } from 'mobx-react';


@inject('store')
@observer
export default class PolyConfig extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isCheck: 0,
      strongColor: '',
      italicColor: '',
    };
  }

  onRangeChange(label, val) {
    const {store} = this.props;
    switch (label) {
      case '边数' : store.selected.setAttr('side', val); break;
      case '宽' : store.selected.setAttr('width', val); break;
      case '高' : store.selected.setAttr('height', val); break;
      case 'X' : store.selected.setAttr('left', val); break;
      case 'Y' : store.selected.setAttr('top', val); break;
      case '透明' : store.selected.setAttr('opacity', val); break;
      case '旋转' : store.selected.setAttr('rotate', val); break;
      case '亮度' : store.selected.setAttr('brightness', val); break;
      case '模糊' : store.selected.setAttr('blur', val); break;
      case '对比' : store.selected.setAttr('contrast', val); break;
      case '饱和' : store.selected.setAttr('saturate', val); break;
      case '灰度' : store.selected.setAttr('grayscale', val); break;
      case '色相' : store.selected.setAttr('hueRotate', val); break;
      case '反色' : store.selected.setAttr('invert', val); break;

    }
  }
  // 数字input框数字改变的函数
  changeNumber(val) {
    const { store } = this.props;
    store.selected.setAttr('borderWidth', val);
  }
  // 蓝色三角符号加减函数
  addNumber() {
    const { store } = this.props;
    store.selected.addNumber();
  }
  decNumber() {
    const { store } = this.props;
    store.selected.decNumber();
  }
  optionStyle(num) {
    const { store } = this.props;
    switch (num) {
      case 0 : store.selected.setAttr('borderStyle', 'none'); break;
      case 1 : store.selected.setAttr('borderStyle', 'solid'); break;
      case 2 : store.selected.setAttr('borderStyle', 'dashed'); break;
      case 3 : store.selected.setAttr('borderColor', 'red'); break;
      case 4 : store.selected.setAttr('borderColor', 'blue'); break;

    }
  }


  componentDidMount() {


  }



  render() {
    const { blur, opacity, width, height, side, top, left, borderWidth, brightness,
      contrast, rotate, grayscale, saturate, hueRotate, invert } = this.props.store.selected;
    // console.log('this.props.store.selected', this.props.store.selected);
    const collapseProps = {
      bordered: false,
      defaultActiveKey: ['0', '1', '2', '3', '4', '5'],
      className: css.body,
    };
    const rangeProps = {
      onRangeChange: this.onRangeChange.bind(this),

    };
    const numProps = {
      optionStyle: this.optionStyle.bind(this),
      changeNumber: this.changeNumber.bind(this),
      decNumber: this.decNumber.bind(this),
      addNumber: this.addNumber.bind(this),
      type: 'number',
    };


    const groups = [
      {
        title: '边数设置',
        children: (
          <div>
            <Bull title="" key="0">
              <Range label="边数" {...rangeProps} min={3} max={10} step={1} inputValue={side}/>
            </Bull>
          </div>
        )
      },
      {
        title: '基本设置',
        children: (
          <div>
            <Bull key="0" title="大小">
              <Whxy label="宽" left={60} {...rangeProps} inputValue={width}/>
              <Whxy label="高" left={120} {...rangeProps} inputValue={height}/>
            </Bull>
            <Bull key="1" title="位置">
              <Whxy label="X" left={60} {...rangeProps} inputValue={left}/>
              <Whxy label="Y" left={120} {...rangeProps} inputValue={top}/>
            </Bull>
          </div>
        )
      },
      {
        title: '样式设置',
        children: (
          <div>
            <Bull key="0" title="填充">
              <Icon type="icon-emoji" className={css.fillIcon}/>
            </Bull>
            <Bull key="1" title="描边">
              <Icon type="icon-emoji" className={css.fillIcon}/>
              <Stroke label="描边" numValue={borderWidth} {...numProps}/>
            </Bull>
            <Bull key="2" title="">
              <Range label="透明" {...rangeProps} min={0} max={1} step={0.01} inputValue={opacity}/>
            </Bull>
            <Bull key="3">
              <Range label="模糊" {...rangeProps} min={0} max={10} step={0.1} inputValue={blur}/>
            </Bull>
            <div />
            <Bull key="4">
              <Range label="旋转" {...rangeProps} min={-180} max={180} step={1} inputValue={rotate}/>
            </Bull>
          </div>
        )
      },
      {
        title: '滤镜设置',
        children: (
          <div>
            <Bull title="" key="0">
              <Range label="亮度" {...rangeProps} min={0} max={200} step={1} inputValue={brightness}/>
            </Bull>
            <Bull title="" key="1">
              <Range label="对比" {...rangeProps} min={0} max={200} step={1} inputValue={contrast}/>
            </Bull>
            <Bull title="" key="2">
              <Range label="饱和" {...rangeProps} min={0} max={100} step={1} inputValue={saturate}/>
            </Bull>
            <Bull title="" key="3">
              <Range label="灰度" {...rangeProps} min={0} max={100} step={1} inputValue={grayscale}/>
            </Bull>
            <Bull title="" key="4">
              <Range label="加温" {...rangeProps} min={-180} max={180} step={1} inputValue={rotate}/>
            </Bull>
            <Bull title="" key="5">
              <Range label="色相" {...rangeProps} min={0} max={360} step={1} inputValue={hueRotate}/>
            </Bull>
            <Bull title="" key="6">
              <Range label="反色" {...rangeProps} min={0} max={100} step={1} inputValue={invert}/>
            </Bull>
          </div>
        )
      },
      {
        title: '元素层级顺序',
        children: (
          <div>
            哈哈哈
          </div>
        )
      }
    ];


    return (

      <Collapse {...collapseProps}>
        {groups.map((group, key) => {
          const _props = {
            ...group,
            key,
          };
          return <Group {..._props}/>;
        })}
      </Collapse>


    );
  }
}
